<template>
  <div>
    <!--活动车辆列表-->

    <FilterTable
      :onSyncTableData="tableChange"
      :isExportExcel="false"
      exportFileName="活动数据.xlsx"
      :onCalcExportData="handleExportFun"
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      datakey="records"
      :isSelectColumn="false"
      :onColumnsChange="columns => (this.columns = columns)"
    >
      <template slot="controls" slot-scope="props">
        <multiuse-button type="primary" :click="exportHandle.bind(this)">导出</multiuse-button>
      </template>
    </FilterTable>

    <div class="dialogBottmView">
      <el-button size="small" type="primary" class="btnStyle" @click="closeDialog">关闭 </el-button>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { dictionary } from '@/utils/dictMixin';
import moment from 'moment';
import { isEmpty } from '@/utils/utils';
import { getAllUser } from '@/api/repair/batchEventManagement/activityDistribution';
import { showTtRpMaVin, exportShowTtRpMaVin } from '@/api/repair/batchEventManagement/activityQueryJingxsDuan';
import { arrayObjDeWeight } from '@/utils';
import { dealerMixin } from '@/pages/repair/batchEventManagement/dealerMixin';

export default {
  name: 'sportCar',
  mixins: [dictionary, dealerMixin],
  data() {
    this.BaseTable = null;
    return {
      fetchApi: showTtRpMaVin,
      dialogTitle: '',
      fetchParams: { xhrAbort: false, flag: this.flag, maId: this.maId },
      columns: this.createTableColumns()
    };
  },
  props: ['flag', 'maId'],
  components: {},

  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
    this.getAllDelears(this.columns, ['resDealer'], 'table');
  },
  methods: {
    tableChange(tableData) {
      tableData.forEach(element => {
        element.resDealer = element.ownerCode;
      });
    },
    // 导出处理函数
    handleExportFun(row) {},

    async exportHandle() {
      await this.downHandleFile(exportShowTtRpMaVin, this.fetchParams, '活动数据');
    },

    async initSelect() {
      let res = await getAllUser();
      // 去重
      let dataList = arrayObjDeWeight(res.data, 'userId');

      this.columns.find(item => item.dataIndex === 'maBy').dictItems = dataList.map(x => ({
        text: x.employeeName,
        value: x.userId
      }));
    },

    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '活动编号',
          dataIndex: 'maNo',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },

        {
          title: 'VIN',
          dataIndex: 'vin',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车型名称',
          dataIndex: 'modelName',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '维修工单号',
          dataIndex: 'roNo',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '完成经销商代码',
          dataIndex: 'ownerCode',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '完成经销商名称',
          dataIndex: 'resDealer',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          dictItems: []
        },
        {
          title: '完成时间',
          dataIndex: 'cancelDate',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'date-range'
        }
      ];
    },

    closeDialog() {
      this.$emit('closeCar', 'close');
    }
  }
};
</script>

<style scoped lang="less">
.bg1 {
  border: 1px solid @borderColor;
  border-radius: @borderRadius;
  box-shadow: @boxShadow;
  padding: @modulePadding;
  padding-left: 0;
  padding-top: 15px;
  padding-bottom: 15px;
}

.bg2 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.btn {
  text-align: center;
}

.btnStyle {
  margin-top: 10px;
}
</style>
